<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />

  <title>
    Sandbagging Technique
  </title>

  <style type="text/css">

  body {
   margin-left:10%;
   margin-right:10%;
  }

  div.figcenter {
   padding:1em;
   text-align:center;
   font-size:0.8em;
   border:none;
   margin:auto;
   text-indent:1em;
  }

  h1 {
   text-align:center;
  }

  hr.chap {
   margin-top:6em;
   margin-bottom:4em;
   clear:both;
  }

  p {
   text-align:justify;
   margin-top:.75em;
   margin-bottom:.75em;
   text-indent:0;
  }

  span.hide {
   display:none
  }

  div.main {
   width:600px;
   font-size:110%;
   margin:auto;
  }

  #img007  {background:url(images/img007.jpg) no-repeat top left}
  #img007a {float:left; width:100%;height:167px;}
  #img007r {float:right;width:30px;height:258px;}
  #img007b {float:left; width:435px;height:20px;}
  #img007c {float:left; width:410px;height:60px;}
  #img007d {float:left; width:305px;height:60px;}
  #img007e {float:left; width:175px;height:118px;clear:left;}

  #img-007  {background:url(images/img007.jpg) no-repeat top left}
  #img-007a {float:left; width:100%;height:167px;
background-color:silver}
  #img-007r {float:right;width:30px;height:258px;
background-color:yellow}
  #img-007b {float:left; width:435px;height:20px;
background-color:green}
  #img-007c {float:left; width:410px;height:60px;
background-color:orange}
  #img-007d {float:left; width:305px;height:60px;
background-color:blue}
  #img-007e {float:left; width:175px;height:118px;clear:left;
background-color:gray}

  </style>

</head>

<body>

<div class="main">

<h1>Using the image process known as sandbagging.</h1>

<p>This document provides steps to be followed
 in producing an image like the following.</p>

<div id="img007">
<div id="img007a">&nbsp;</div>
<div id="img007r">&nbsp;</div>
<div id="img007b">&nbsp;</div>
<div id="img007c">&nbsp;</div>
<div id="img007d">&nbsp;</div>
<div id="img007e">&nbsp;</div>

<p><b><span class="hide">W</span>hen</b> I was a little girl, which is now a good many years ago, there
came to spend some time with us a cousin who had been brought up in
Germany. She was almost grown-up&mdash;to me, a child of six or seven, she
seemed <i>quite</i> grown-up; in reality, she was, I suppose, about fifteen
or sixteen. She was a bright, kind, good-natured girl, very anxious to
please and amuse her little English cousins, especially me, as I was
the only girl. But she had not had much to do with small children;
above all, delicate children, and she was so strong and hearty herself
that she did not understand anything about nervous fears and fancies.
I think I was rather delicate, at least, I was very fanciful; and as I
was quiet and gave very little trouble, nobody noticed how constantly
I was reading, generally in a corner by myself. I now see that I read
far too many stories, for even of good and harmless things it is
possible to have too much. In those days, fortunately for me, there
were not nearly so many books for children, so, as I read very fast, I
was often obliged to read the same stories over and over again. This
was much better for me than always getting new tales and galloping
through them, as I see many children do now-a-days, but still I think
I lived too much in story-book world, and it was well for me when
other things forced me to become more, what is called, "practical."</p>

</div><!--img007-->

<p>My cousin Meta was full of life and activity, and after awhile she
grew tired of always finding me buried in my books.</p>

<hr class="chap" />

<h1>Original Document.</h1>

<p>The image will probably need preparation.  This one came to me
as shown below. (Someone had obviously done some pre-processing
on it.)</p>

<div class="figcenter" style="width: 600px;">
<img src="images/img007-original.jpg" width="600" height="420" alt="" />
</div>

<hr class="chap" />

<h1>Clear the Text Area.</h1>

<p>Using any image processor, clear the area in which the text is to be written.
I used GIMP. Both <a href="http://gimp-win.sourceforge.net/stable.html">GIMP</a>
and <a href="http://www.irfanview.com">IrfanView</a> are free. Other image processors
such as <a href="http://www.adobe.com/PhotoshopFamily">Photoshop</a> are expensive but significantly more powerful.</p>

<div class="figcenter" style="width: 600px;">
<img src="images/img007-1.jpg" width="600" height="425" alt="" />
</div>

<hr class="chap" />

<h1>Supply a large first letter.</h1>

<p>Using GIMP, I supplied the large first letter.
This probably could have been done using dropcap.first letter, but I
found this easier at the time.</p>

<div class="figcenter" style="width: 600px;">
<img src="images/img007.jpg" width="600" height="425" alt="" />
</div>

<hr class="chap" />

<h1>Determine slice measurements.</h1>

<p>Again, using GIMP, I put a grid over the image.  In this case I used a grid
of 50 pixels by 50 pixels. The grid is used to estimate the height
and width of each sandbag division.</p>

<div class="figcenter" style="width: 600px;">
<img src="images/gimp01.jpg" width="600" height="426" alt="" />
</div>

<p> I decided to use five vertical steps. This required six sandbag divisions to cover
the areas of the images in which I wanted no text to flow.
The first sandbag covers the top area in which no text is to be flowed.
The next five cover the area of each step which is to be blocked.</p>

<h4>The sandbags were as follows:</h4>

<ol>
<li>Cover of the top down to a portion of the W. <span style="float:right">w=600px h=167px</span></li>
<li>Cover of the right stripe on the image. <span style="float:right">w=030px h=258px</span></li>
<li>Cover the left of the rest of the W. <span style="float:right">w=435px h=020px </span></li>
<li>Cover an area on the left of the image. <span style="float:right">w=410px h=060px </span></li>
<li>Cover the next area on the left of the image. <span style="float:right">w=305px h=060px</span></li>
<li>Cover the last area on the left of the image. <span style="float:right">w=175px h=118px</span></li>
</ol>

<p>Of course the height and width of each area had to be a best guess
based on the grid.  You could use a different grid or another tool to get
more accurate measurements.</p>

<hr class="chap" />

<h1>Create CSS and HTML.</h1>

<p>The following CSS was used to describe the image and the sandbag
covers to be used.</p>

<p>The first line specifies the background image to be used in the division
with an id of "img007". It also specifies the placement
of the image at the top and left of the
division and the instruction that the image is not be repeated if the
division contains room for more than one copy.</p>

<p>The next six lines describe the dimensions and placements of divisions
with the given IDs. These divisions are the sandbags.  They will be used
to cover portions of the img007 division so that text can not flow there.

<pre>
  #img007  {background:url(images/img007.jpg) no-repeat top left}
  #img007a {float:left; width:100%;height:167px;}
  #img007r {float:right;width:30px;height:258px;}
  #img007b {float:left; width:435px;height:20px;}
  #img007c {float:left; width:410px;height:60px;}
  #img007d {float:left; width:305px;height:60px;}
  #img007e {float:left; width:175px;height:118px;clear:left;}
</pre>

<p>The following CSS was used to allow the first letter to be hidden yet
available to any user agent which does not recognize CSS.</p>

<pre>
  span.hide {
   display:none
  }
</pre>

<p>The following HTML was used.</p>

<pre>
&lt;div id="img007">
&lt;div id="img007a">&amp;nbsp;&lt;/div>
&lt;div id="img007r">&amp;nbsp;&lt;/div>
&lt;div id="img007b">&amp;nbsp;&lt;/div>
&lt;div id="img007c">&amp;nbsp;&lt;/div>
&lt;div id="img007d">&amp;nbsp;&lt;/div>
&lt;div id="img007e">&amp;nbsp;&lt;/div>

&lt;p>&lt;b>&lt;span class="hide">W&lt;/span>hen&lt;/b> I was a
little girl, which is now a good many years ago, there
came to spend some time with us a cousin who had been
brought up in Germany. She was almost grown-up&mdash;to me,
a child of six or seven, she seemed &lt;i>quite&lt;/i>
grown-up; in reality, she was, I suppose, about fifteen or
sixteen. She was a bright, kind, good-natured girl, very
anxious to please and amuse her little English cousins,
especially me, as I was the only girl. But she had not had
much to do with small children; above all, delicate
children, and she was so strong and hearty herself that she
did not understand anything about nervous fears and fancies.
I think I was rather delicate, at least, I was very
fanciful; and as I was quiet and gave very little trouble,
nobody noticed how constantly I was reading, generally in a
corner by myself. I now see that I read far too many
stories, for even of good and harmless things it is possible
to have too much. In those days, fortunately for me, there
were not nearly so many books for children, so, as I read
very fast, I was often obliged to read the same stories over
and over again. This was much better for me than always
getting new tales and galloping through them, as I see many
children do now-a-days, but still I think I lived too much
in story-book world, and it was well for me when other
things forced me to become more, what is called,
"practical."&lt;/p> &lt;/div>&lt;!--img007-->
</pre>

<p><b>Note that the &lt;/div> for the image itself ends after a considerable amount of
text.  If it is not far enough down, the image
will be truncated and the entire image will not be shown.</b></p>

<hr class="chap" />

<h1>Adjust CSS.</h1>

<p>If things don't line up right or you don't understand why things
are flowing as expected, it is a good idea to use background colors
to determine what each sandbag is doing.</p>

<pre>
  #img007  {background:url(images/img007.jpg) no-repeat top left}
  #img007a {float:left; width:100%;height:167px;
background-color:silver}
  #img007r {float:right;width:30px;height:258px;
background-color:yellow}
  #img007b {float:left; width:435px;height:20px;
background-color:green}
  #img007c {float:left; width:410px;height:60px;
background-color:orange}
  #img007d {float:left; width:305px;height:60px;
background-color:blue}
  #img007e {float:left; width:175px;height:118px;clear:left;
background-color:gray}
</pre>

<p>This will produce</p>

<div id="img-007">
<div id="img-007a">&nbsp;</div>
<div id="img-007r">&nbsp;</div>
<div id="img-007b">&nbsp;</div>
<div id="img-007c">&nbsp;</div>
<div id="img-007d">&nbsp;</div>
<div id="img-007e">&nbsp;</div>

<p><b><span class="hide">W</span>hen</b> I was a little
girl, which is now a good many years ago, there came to spend some
time with us a cousin who had been brought up in Germany. She was
almost grown-up&mdash;to me, a child of six or seven, she seemed
<i>quite</i> grown-up; in reality, she was, I suppose, about
fifteen or sixteen. She was a bright, kind, good-natured girl, very
anxious to please and amuse her little English cousins, especially me,
as I was the only girl. But she had not had much to do with small
children; above all, delicate children, and she was so strong and
hearty herself that she did not understand anything about nervous
fears and fancies. I think I was rather delicate, at least, I was very
fanciful; and as I was quiet and gave very little trouble, nobody
noticed how constantly I was reading, generally in a corner by myself.
I now see that I read far too many stories, for even of good and
harmless things it is possible to have too much. In those days,
fortunately for me, there were not nearly so many books for children,
so, as I read very fast, I was often obliged to read the same stories
over and over again. This was much better for me than always getting
new tales and galloping through them, as I see many children do
now-a-days, but still I think I lived too much in story-book world,
and it was well for me when other things forced me to become more,
what is called, "practical."</p>
</div><!--img-007-->

<p>&nbsp;<br />&nbsp;<br /><b>Now you know
the area covered by each sandbag and you can tweak as necessary.</b></p>

<hr class="chap" />

<p>Irfanview can be found here:
<a href="http://www.irfanview.com">Irfanview home page</a></p>

<p>GIMP can be found here:
<a href="http://gimp-win.sourceforge.net/stable.html">GIMP home page</a></p>

<p>Photoshop can be found here:
<a href="http://www.adobe.com/PhotoshopFamily">Photoshop home page</a></p>


</div><!--main-->
</body>
</html>
